<template>
  <div class="user_logo">
    <a-dropdown>
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="1">
            <UserOutlined/>
            个人中心
          </a-menu-item>
          <a-menu-item key="2">
            <SettingOutlined/>
            账户设置
          </a-menu-item>
          <a-menu-item key="3">
            <LogoutOutlined/>
            退出登录
          </a-menu-item>
        </a-menu>
      </template>
      <span>
        您好 {{ store.state.user.user_data.realName }}
        <!--        <DownOutlined/>-->
        <UserDeleteOutlined style="fontSize:1.2rem"/>
      </span>
    </a-dropdown>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance} from 'vue';
import {UserOutlined, DownOutlined, UserDeleteOutlined, SettingOutlined, LogoutOutlined} from '@ant-design/icons-vue';
import {useStore} from "vuex"
import {useRouter} from "vue-router"

export default defineComponent({
  setup() {
    const store = useStore()
    const router = useRouter()
    const {ctx} = getCurrentInstance()

    const handleButtonClick = e => {

    };

    const handleMenuClick = e => {

      switch (e.key) {
        case "1":
          ctx.$router.go(-100)
          break;
        case "2":
          ctx.$router.go(-100)
          break;
        case "3":
          // ctx.$router.go(-100)
          store.commit("SET_LOADING", true)
          store.commit("clearLoginInfo")
          setTimeout(() => {
            store.commit("SET_LOADING", false)
            router.replace("/login")
          }, 1000)


          break;
      }
    };
    //退出登录
    const logout = () => {
      ctx.$router.go(-100)
    }

    return {
      handleButtonClick,
      handleMenuClick,
      logout,
      store
    };
  },

  components: {
    UserOutlined,
    DownOutlined,
    UserDeleteOutlined,
    SettingOutlined,
    LogoutOutlined

  },
});
</script>
<style lang="scss" scoped>
//.demo-dropdown-wrap :deep(.ant-dropdown-button) {
//  margin-right: 8px;
//  margin-bottom: 8px;
//}

.user_logo {
  font-size: 0.8rem;
  color: #c4c4c4;
}
</style>
